<template>
  <div ref="pageRef" class="page">
    <p class="msg">测试一段文本，通过css变量控制</p>
    <button @click="changeCssVar">changeCssVar</button>
  </div>
</template>

<script setup lang="ts">
// 取 :root 中的变量 使用 getComputedStyle(document.documentElement).getPropertyValue('--xxx')
// Parameters<typeof useCssVar> Parameters 可以取到一个函数的参数类型

import { ref } from 'vue';
// https://vueuse.org/core/useCssVar/
import { useCssVar } from '@vueuse/core';

const pageRef = ref();
// 此方法修改变量是通过在行内覆盖的形式修改的
// 思考：是否可以写一个批量修改css变量的方法
const color = useCssVar('--color', pageRef);

function changeCssVar() {
  // 写在css中的变量 获取到的值会带前置空格
  // 从行内取到的变量内有以上问题
  console.log('|' + color.value + '|');
  console.log(color.value);
  if (color.value.includes('red')) {
    color.value = 'blue';
  } else {
    color.value = 'red';
  }
}
</script>

<style scoped>
.page {
  --color: red;
}

.msg {
  color: var(--color);
}
</style>
